<template>
	<view class="loadingSeven">
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.loadingSeven{
	    width: 55px;
		height: 30px;
		display: flex;
		justify-content: space-between;
	}
	.loadingSeven text{
	    display: inline-block;
	    width: 5px;
	    border-radius: 4px;
	    background: lightgreen;
	    -webkit-animation: loadsaven 1.04s ease infinite;
	}
	@-webkit-keyframes loadsaven{
	    0%,100%{
	        height: 100%;
	        background: lightgreen;
	    }
	    50%{
	        height: 10px;
			margin-top: 10px;
	        background: lightblue;
	    }
	}
	.loadingSeven text:nth-child(2){
	    -webkit-animation-delay:0.13s;
	}
	.loadingSeven text:nth-child(3){
	    -webkit-animation-delay:0.26s;
	}
	.loadingSeven text:nth-child(4){
	    -webkit-animation-delay:0.39s;
	}
	.loadingSeven text:nth-child(5){
	    -webkit-animation-delay:0.52s;
	}
</style>
